<template>
    <div class="search_wrapper" ref="search_wrapper">
        <div class="address">
          <div class="con">
            <div class="item border-bottom" v-for="(item, index) of placeList" :key="index" @click='handleAddressClick(index, item.geohash, item.name)'>
                <p><span class="distance">14.6km</span><span class="name">{{item.name}}</span></p>
                <p class="address">{{item.address}}</p>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'ChooseAddressSearch',
  props: {
    placeList: Array
  },
  data () {
    return {
    }
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.search_wrapper, {
      mouseWheel: {
        speed: 20,
        invert: false,
        easeTime: 300
      }
    })
  },
  methods: {
    handleAddressClick (index, geohash, name) {
      this.SAVE_GEOHASH(geohash)
      this.RECORD_ADDRESSNAME(name)
      this.$emit('change', index, geohash)
    },

    ...mapMutations(['SAVE_GEOHASH', 'RECORD_ADDRESSNAME'])
  },
  computed: {
    ...mapState(['addressName'])
  }
}
</script>

<style lang="stylus" scoped>
  .search_wrapper
    overflow: hidden
    position: absolute
    top: 2rem
    left: 0
    right: 0
    bottom: 1rem
    .border-bottom
      &:before
        border-color: #ddd
    .address h3
      padding: .3rem 0 .14rem .3rem
    .address  .item
      padding: .22rem .3rem
      background: #fff
      span
        display: inline-block
      .name
        font-size: .3rem
        font-weight: bold
        color: #333
      .distance
        float: right
        margin-top: .08rem
      .call
        padding: 0 .2rem 0 .1rem
</style>
